<template>
  <div class="contents">
    <div class="information">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content">基础信息</div>
        </el-col>
        <el-col :span="15">
          <div class="bg-purple">
            <p>
              测点名称：
              <span>{{selectRow.name}}</span>
            </p>
            <p>
              测点编号：
              <span>{{selectRow.code}}</span>
            </p>
            <p>
              所属构件：
              <span>{{selectRow.crossSectionName}}</span>
            </p>
            <p>
              更新时间：
              <span>{{selectRow.updateTime | YMDHMS}}</span>
            </p>
          </div>
        </el-col>
        <el-col :span="4">
          <!-- <el-button type="primary" size="small">修改</el-button> -->
        </el-col>
      </el-row>
    </div>
    <div class="information">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content">安装信息</div>
        </el-col>
        <el-col :span="15">
          <div class="bg-purple">
            <p>
              设备名称：
              <span>{{deviceData.name}}</span>
            </p>
            <p>
              设备编号：
              <span>{{deviceData.code}}</span>
            </p>
            <p>
              设备类型：
              <span>{{deviceData.type}}</span>
            </p>
            <p>
              安装时间：
              <span>{{deviceData.updateTime | YMDHMS}}</span>
            </p>
          </div>
        </el-col>
        <el-col :span="4">
          <!-- <el-button type="primary" size="small">修改</el-button> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    selectRow:{
      type: Object
    },
    deviceData:{
      type: Object
    }
  },
  data() {
    return {
      gai: "改良",
    };
  },

  components: {},
  methods: {},
  computed: {},
  watch:{
    selectRow: {
      handler(newVal){
        // console.log("接受的数据 row",newVal)
      },
      deep:true,
      immediate:true
    },

    deviceData: {
      handler(newVal){
        // console.log("接受的数据 deviceData",newVal)
      },
      deep:true,
      immediate:true
    },
  }
};
</script>

<style lang="scss" scoped>
.contents {
  .information {
    margin-top: 50px;
    width: 100%;
    padding-bottom: 25px;
    .grid-content:nth-child(1) {
      font-size: 18px;
      text-align: center;
      line-height: 35px;
    }
    .bg-purple {
      font-size: 16px;
      margin-left: 65px;
      line-height: 38px;
      p {
        color: #999999;
        span {
          color: black;
        }
      }
    }
  }
  .information:nth-child(1) {
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>
